<script setup lang="ts">
import EventCollection from '@/pages/home/eventCollection';
import { useAppStore } from '@/store';

interface IProps {
  data: BtnModelRelations;
  btnList: IServerBtnListBtnList[];
}

interface IState {
  current: number;
}

const store = useAppStore();
const props = defineProps<IProps>();
const state = reactive<IState>({
  current: 0,
});

// 点击事件处理
const handlePress = (item: IBtnFormatsList) => {
  EventCollection.onPress(item, 1, props.btnList);
  store.$patch({ btnInformation: { ...item, moduleType: 1 } as IServerBtnListBtnList });
};

// 长按事件处理
const handleLongPress = (item: IBtnFormatsList) => {
  EventCollection.onLongPress(item);
  store.$patch({ btnInformation: { ...item, moduleType: 1 } as IServerBtnListBtnList });
};
</script>

<template>
  <view class="p-[4px]">
    <view class="pos-relative" v-for="btnFormat in props.data.btnFormats" :key="btnFormat.formatId">
      <swiper :style="{ height: (btnFormat.col === 3 ? 120 : 90) * btnFormat.row + 'px' }" @change="(e) => (state.current = e.detail.current)">
        <swiper-item class="grid gap-2 mb-[8px]" :class="btnFormat.col === 3 ? 'grid-cols-3' : btnFormat.col === 4 ? 'grid-cols-4' : 'grid-cols-5'" v-for="(row, rowIndex) in btnFormat.list" :key="rowIndex">
          <view class="flex flex-col justify-center items-center" v-for="item in row" :key="item.id" @click="handlePress(item)" @longpress="handleLongPress(item)">
            <image :style="{ width: btnFormat.col === 3 ? '65px' : '50px', height: btnFormat.col === 3 ? '65px' : '50px' }" lazy-load :src="item.value" />
            <text class="w-full c-text-ellipsis mt-[8px] text-align-center" :style="{ fontWeight: btnFormat.col === 3 ? 'bold' : '', fontSize: btnFormat.col === 3 ? '16px' : '' }">{{ item.name }}</text>
            <text v-if="btnFormat.col === 3" class="w-full c-text-ellipsis mt-[2px] c-text-color-grey text-align-center c-text-12">{{ item.describes }}</text>
          </view>
        </swiper-item>
      </swiper>
      <view v-if="btnFormat.list.length > 1" class="flex justify-center h-[3px] my-[8px]">
        <view v-for="item in btnFormat.list.length" :key="item" class="w-[23px] c-br h-full mx-[10px] bg-[#c7c7c7]" :class="item === state.current + 1 ? 'c-bg' : ''"></view>
      </view>
    </view>
  </view>
</template>
